// import {addCamera} from '@/api/videoSurveillance'
import useModal from '@/hooks/modalHook'
// import {message} from '@/libs/global/antDesignVue'
// import {getStorage} from '@/libs/localstoreage'
import {IconImg} from '../image'
import {CnBoldP, CnNormalP, CnNormalSpan} from '../text'

const AddCameraModal = defineComponent({
  emits: {
    success: (): boolean => true,
    error: (): boolean => true,
    load: (openModal: () => void, closeModal: () => void): boolean => true
  },
  setup(props, {emit}) {
    const {visible, closeModal, openModal} = useModal({
      closeCallback() {
        return true
      }
    })

    // let dataSource = reactive<{
    //   url: string
    //   appKey: string
    //   secret: string
    //   vedioName: string
    //   deviceSerial: string
    //   channelNo: string
    // }>({
    //   appKey: '',
    //   secret: '',
    //   vedioName: '',
    //   url: '',
    //   deviceSerial: '',
    //   channelNo: ''
    // })

    // function initDataSource() {
    //   dataSource.appKey = ''
    //   dataSource.secret = ''
    //   dataSource.vedioName = ''
    //   dataSource.url = ''
    //   dataSource.deviceSerial = ''
    //   dataSource.channelNo = ''
    // }

    // function handleModalSubmit() {
    //   let userId = getStorage('userId')
    //   if (!userId) {
    //     return
    //   }
    //   if (!dataSource.vedioName) {
    //     message.warning('请输入摄像头名称')
    //     return
    //   }
    //   if (!dataSource.appKey) {
    //     message.warning('请输入AppKey')
    //     return
    //   }
    //   if (!dataSource.secret) {
    //     message.warning('请输入Secret')
    //     return
    //   }
    //   if (!dataSource.url) {
    //     message.warning('请输入监控预览地址')
    //     return
    //   }
    //   if (!dataSource.deviceSerial) {
    //     message.warning('请输入设备序列号')
    //     return
    //   }
    //   if (!dataSource.channelNo) {
    //     message.warning('请输入通道号')
    //     return
    //   }

    //   addCamera({
    //     cameraName: dataSource.vedioName,
    //     appSecret: dataSource.secret,
    //     appKey: dataSource.appKey,
    //     cameraUrl: dataSource.url,
    //     deviceSerial: dataSource.deviceSerial,
    //     channelNo: dataSource.channelNo,
    //     userId
    //   })
    //     .then(res => {
    //       closeModal()
    //       initDataSource()
    //       emit('success')
    //     })
    //     .catch(err => {
    //       emit('error')
    //     })
    // }
    onMounted(() => {
      emit('load', openModal, closeModal)
    })
    return () => (
      <a-modal
        title='添加萤石云摄像头'
        v-model={[visible.value, 'visible']}
        onOk={closeModal}
        onCancel={closeModal}
      >
        <div>
          <CnBoldP class='text-18 text-primary tracking-wider text-center py-32'>
            请联系售后人员
          </CnBoldP>
          <div class='flex items-start justify-center mb-34'>
            <div class='flex items-center gap-x-6'>
              <IconImg imgName='service-phone' class='w-24 h-24'></IconImg>
              <CnNormalSpan class='text-16 text-xText'>客服电话：</CnNormalSpan>
            </div>
            <div class=''>
              <CnNormalP class='mb-8 text-16 text-xText'>0571-88087777</CnNormalP>
              <CnNormalP class='text-16 text-xText'>135 8827 5199</CnNormalP>
            </div>
          </div>
        </div>

        {/* <a-form
          class='p-32'
          labelCol={{
            span: 5
          }}
        >
          <a-form-item label='摄像头名称：'>
            <a-input v-model={[dataSource.vedioName, 'value']}></a-input>
            <CnNormalP class='text-12 mt-8 whitespace-pre-wrap'>对摄像头命名</CnNormalP>
          </a-form-item>
          <a-form-item label='AppKey：'>
            <a-input v-model={[dataSource.appKey, 'value']}></a-input>
            <CnNormalP class='text-12 mt-8 whitespace-pre-wrap'>
              所在位置：萤石云开放平台-账号中心-应用信息-应用秘钥-AppKey
            </CnNormalP>
          </a-form-item>
          <a-form-item label='Secret：'>
            <a-input v-model={[dataSource.secret, 'value']}></a-input>
            <CnNormalP class='text-12 mt-8 whitespace-pre-wrap'>
              所在位置：萤石云开放平台-账号中心-应用信息-应用秘钥-Secret
            </CnNormalP>
          </a-form-item>
          <a-form-item label='设备序列号：'>
            <a-input v-model={[dataSource.deviceSerial, 'value']}></a-input>
            <CnNormalP class='text-12 mt-8 whitespace-pre-wrap'>
              所在位置：萤石云开放平台-设备管理-设备序列号
            </CnNormalP>
          </a-form-item>
          <a-form-item label='通道号：'>
            <a-input v-model={[dataSource.channelNo, 'value']}></a-input>
            <CnNormalP class='text-12 mt-8 whitespace-pre-wrap'>
              所在位置：萤石云开放平台-设备管理-查看通道-通道号
            </CnNormalP>
          </a-form-item>
          <a-form-item label='监控预览地址：'>
            <a-input v-model={[dataSource.url, 'value']}></a-input>
            <CnNormalP class='text-12 mt-8 whitespace-pre-wrap'>
              所在位置：萤石云开放平台-设备管理-查看通道-监控地址-预览地址
            </CnNormalP>
          </a-form-item>
        </a-form> */}
      </a-modal>
    )
  }
})

export default AddCameraModal
